<template>
  <div>
    <template v-for="(element, index) in elements">
      <!-- 行内代码：灰色背景 -->
      <span v-if="element.style & ELEMENT_STYLE_MASK_INLINE_CODE" :key="`span-${index}`" :style="inlineCodeStyle">
        <!-- 内容及内容样式：下划线、删除线、背景色、字体颜色 -->
        <cn-text-block-element-content :element="element" />
      </span>
      <!-- 内容及内容样式：下划线、删除线、背景色、字体颜色 -->
      <cn-text-block-element-content v-else :key="`text-${index}`" :element="element" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { PropType, toRefs } from 'vue';
import { type CnElement } from '../../types';
import { ELEMENT_STYLE_MASK_INLINE_CODE } from '../../util';
import CnTextBlockElementContent from './cn-element-content.vue';

const props = defineProps({
  elements: {
    type: Array as PropType<Array<CnElement>>,
    required: true,
  },
});
const { elements } = toRefs(props);

const inlineCodeStyle = {
  backgroundColor: '#f5f6f7',
  margin: '0 3px',
  padding: '1px 2px',
  border: '1px solid #dee0e3',
  borderRadius: '4px',
};
</script>
